在前後端分離之後，前端頁面的路由控制變成為重要的課題，
由 vue-cli 產生的專案中，其中能夠選擇是否使用 vue-route，

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

在專案中 main.js 裡，將路由元件引入。

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

在 router.js 中，有使用普通載入、和緩載入兩種路由方式，
並在屬性 routes 下定義路由，
當路由改變的時候，切換成指定的元件。

// app.vue
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

標籤 router-link 是用來切換路由用的原生元件，是標籤 a 的封裝。
標籤 router-view 放置切換後元件嵌入點，用來呈現各元件。
如此就完成了前端路由的作業。

vue 發展到現在，已經非常完善，
在開發上有很完整的工具鍊，
對於給新手使用，有良好的學習曲線。